
<template>
  <div class="resource-main-box new-page">
    <a-form-model
      layout="inline"
      :model="search"
      class="comm-search-f"
      :style="`width: calc(100% - ${sideMenuWidth} - 33px)`"
    >

      <!-- 筛选条件与查询 -->
      <!-- 机型 -->
      <a-form-model-item label="">
        <airModel v-model="search.model" style="width: 100%" width="100%" />
      </a-form-model-item>

      <a-form-model-item label="">
        <a-select
          v-model="search.alertType"
          show-arrow
          style="width: 100%"
          placeholder="Alert类型"
          :max-tag-count="1"
          allow-clear
        >
          <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
          <a-select-option v-for="item in alertType" :key="item.name" :value="item.name">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item label="">
        <a-input
          v-model="search.code"
          placeholder="Alert代码"
        />
      </a-form-model-item>

      <a-form-model-item label="">
        <a-input
          v-model="search.name"
          placeholder="Alert名称"
        />
      </a-form-model-item>

      <a-form-model-item label="">
        <a-select
          v-model="search.category"
          show-arrow
          style="width: 100%"
          placeholder="报文类型"
          :max-tag-count="1"
          allow-clear
        >
          <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
          <a-select-option v-for="item in alertRepType" :key="item.name" :value="item.name">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item class="ant-row-a-2" style="flex:1!important;max-width:100%!important">
        <a-button type="default" ghost :loading="servAlertLoading" @click="resetSearchHandler">
          重置
        </a-button>
        <a-button type="primary" class="ml-8" :loading="servAlertLoading" @click="changeTable({ current: 1 })">
          查询
        </a-button>
      </a-form-model-item>
    </a-form-model>

    <div class="pt-16 pl-16 pr-16 pb-16">
      <a-button type="primary" ghost :loading="servAlertLoading" @click="addVisible=true">
        新增
      </a-button>
    </div>

    <!-- table -->
    <a-table
      class="table-border"
      :columns="columns"
      size="middle"
      :data-source="servAlertList"
      :row-key="(row,index) => row.id"
      :pagination="{
        showTotal:(total)=> `共 ${total} 条数据`,
        showSizeChanger: true,//设置每页显示数据条数
        showQuickJumper: true,
        size:'big',
        current:paginationOptions.pageNum,
        pageSize:paginationOptions.pageSize,
        total:paginationOptions.total
      }"
      :loading="servAlertLoading"
      :row-class-name="rowClassHandler"
      @change="changeTable"
    />

    <!-- add -->
    <a-modal
      v-model="addVisible"
      :mask-closable="false"
      title=""
      :width="1300"
      class="rt-i-modal"
      centered
      @cancel="cancelHandler"
    >
      <span slot="closeIcon" class="c-dialog-close-icon"><a-icon :component="require('@/assets/icon/close.svg')" /></span>

      <div class="c-dialog-title fw-500">{{ addTitle }}</div>

      <div slot="footer">
        <template v-if="addTitle!=='新增'">
          <a-button type="primary" ghost :disabled="rowIndex<=0" @click="editPrev">
            上一条
          </a-button>
          <a-button type="primary" ghost :disabled="rowIndex>=servAlertList.length-1" @click="editNext">
            下一条
          </a-button>
          <a-button type="primary" ghost @click="reBackData">
            恢复初始设置
          </a-button>
        </template>

        <a-button @click="cancelHandler">取消</a-button>
        <a-button type="primary" :loading="saveServAlertLoading" @click="addConfirmHandler">确定</a-button>
      </div>
      <a-form-model
        ref="addForm"
        :model="addForm"
        :rules="addRules"
      >

        <a-row :gutter="16">
          <a-col :span="8">
            <a-form-model-item label="Alert代码" prop="code">
              <a-input
                v-model="addForm.code"
                placeholder="Alert代码"
                class="input-type-o"
                style="width: 100%"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="机型" prop="model">
              <airModel
                v-model="addForm.model"
                class="input-type-o"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="DCG" prop="groupName">
              <groupName
                :key="Math.random()"
                v-model="addForm.groupName"
                class="group-name-select-box input-type-o"
                style="width: 100%"
              />

            </a-form-model-item>
          </a-col>

          <a-col :span="8">
            <a-form-model-item label="警告类型" prop="alertType">
              <a-select
                v-model="addForm.alertType"
                show-arrow
                style="width: 100%"
                class="input-type-o"
                placeholder="Alert类型"
                allow-clear
              >
                <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
                <a-select-option
                  v-for="item in alertType"
                  :key="item.name"
                  :value="item.name"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>

          </a-col>
          <a-col :span="8">
            <a-form-model-item label="报文类型" prop="category">
              <a-select
                v-model="addForm.category"
                show-arrow
                class="input-type-o"
                style="width: 100%"
                placeholder="报文类型"
                allow-clear
                @change="categoryChangeHandler"
              >
                <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
                <a-select-option v-for="item in alertRepType" :key="item.name" :value="item.name">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>

          </a-col>
          <a-col :span="8">
            <a-form-model-item label="报文名称" prop="sourceName">
              <a-select
                v-model="addForm.sourceName"
                show-arrow
                class="input-type-o"
                style="width: 100%"
                placeholder="报文名称"
                allow-clear
              >
                <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
                <a-select-option v-for="item in sourceName" :key="item.remark" :value="item.remark">
                  {{ item.remark }}
                </a-select-option>
              </a-select>
            </a-form-model-item>

          </a-col>
          <a-col :span="8">
            <a-form-model-item label="名称" prop="name">
              <!-- <reportType v-model="addForm.name" /> -->
              <a-input v-model="addForm.name" placeholder="输入名称" class="input-type-o" />
            </a-form-model-item>

          </a-col>

          <a-col :span="8">
            <a-form-model-item prop="description">
              <span slot="label">描述<span class="text-color-9ea5b2 fs-12">选填</span></span>
              <a-textarea
                v-model="addForm.description"
                style="width: 100%"
                class="input-type-o"
                :auto-size="{ minRows: 3, maxRows: 5 }"
              />
            </a-form-model-item>

          </a-col>

        </a-row>
        <a-row :gutter="16">

          <a-col :span="8">
            <a-form-model-item label="触发逻辑" prop="triggerContent">
              <a-textarea
                v-model="addForm.triggerContent"
                style="width: 100%"
                class="input-type-o logic-textarea"
              />

            </a-form-model-item>

          </a-col>
          <a-col :span="16" class="pt-25">
            <a-input
              v-model="labelForm.labelName"
              placeholder="输入标签名称查询"
              class="input-type-o"
            >
              <a-icon slot="suffix" :component="require('@/assets/icon/search.svg')" @click="changeRpTable({current:1})" />
            </a-input>
            <!-- table -->
            <a-table
              class="mt-16 table-border pt-1"
              :columns="columnsType"
              size="middle"
              :row-selection="rowSelection"
              :data-source="repReportParamLabelList"
              :row-key="(row,index) => row.labelName"

              :pagination="{
                showTotal:(total)=> `共 ${total} 条数据`,
                showSizeChanger: true,//设置每页显示数据条数
                showQuickJumper: true,
                size:'big',
                current:rpPaginationOptions.pageNum,
                pageSize:rpPaginationOptions.pageSize,
                total:rpPaginationOptions.total,
                pageSizeOptions:['5', '10', '15', '20']
              }"
              :loading="repReportParamLabelLoading"
              @change="changeRpTable"
            />
          </a-col>
        </a-row>

      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from 'vuex';
import rowClass from '@/pages/common/rowClass';
import { priorityList } from '@/pages/common/constant.js';
import airModel from '@/pages/components/airModel';
import groupName from '@/pages/components/groupName';
export default {
  components: {
    airModel,
    groupName
  },
  mixins: [rowClass],
  data() {
    return {
      rowSelection: {
        selectedRowKeys: [],
        onSelect: (record, selected, selectedRows) => {
          this.addForm.labelName = record.labelName;
          this.rowSelection.selectedRowKeys[0] = record.labelName;
        },
        onSelectAll: (selected, selectedRows, changeRows) => {
          // console.log(selected, selectedRows, changeRows);
        },
        onChange: (selectedRowKeys) => {
          this.rowSelection.selectedRowKeys = [...selectedRowKeys];
        },
        type: 'radio'
      },
      sourceName: [],
      labelForm: {
        labelName: ''
      },
      priorityList,
      search: {
      },
      sms: [
        {
          value: 0,
          name: '否'
        },
        {
          value: 1,
          name: '是'
        }
      ],
      addVisible: false,
      addForm: {
        groupName: undefined
      },
      rowIndex: 0,
      addTitle: '新增',
      addRules: Object.freeze({
        code: [
          { required: true, message: '请填写', trigger: 'change' }
        ],
        model: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        category: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        groupName: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        alertType: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请填写', trigger: 'change' }
        ],
        nameZh: [
          { required: true, message: '请填写', trigger: 'change' }
        ],
        smi: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        triggerContent: [
          { required: true, message: '请填写', trigger: 'change' }
        ],
        sourceName: [
          { required: true, message: '请填写', trigger: 'change' }
        ]

      }),
      columnsType: Object.freeze([
        {
          title: '参数名称',
          align: 'left',
          dataIndex: 'labelName',
          customRender: (value) => {
            return value || '--';
          }
        },
        {
          title: '参数别名',
          align: 'left',
          dataIndex: 'alias',
          customRender: (value) => {
            return value || '--';
          }
        }
      ]),
      columns: Object.freeze([

        {
          title: '代码',
          align: 'left',

          dataIndex: 'code',
          customRender: (value) => {
            return value || '--';
          }
        },
        {
          title: '名称',
          align: 'left',

          dataIndex: 'name',
          customRender: (value) => {
            return value || '--';
          }
        },
        {
          title: '描述',
          align: 'left',

          dataIndex: 'description',
          customRender: (value) => {
            return value || '--';
          }
        },
        {
          title: '机型',
          align: 'left',

          dataIndex: 'model',
          customRender: (value) => {
            return value || '--';
          }
        },
        {
          title: '类型',
          align: 'left',

          dataIndex: 'category',
          customRender: (value) => {
            return value || '--';
          }
        },
        {
          title: '来源报文',
          align: 'left',
          dataIndex: 'alertType',
          customRender: (value) => {
            return value || '--';
          }
        },

        {
          title: '触发逻辑',
          align: 'left',
          width: '30%',

          dataIndex: 'triggerContent',
          customRender: (value) => {
            return value || '--';
          }
        },
        {
          title: '分类',
          align: 'left',
          dataIndex: 'groupName',
          customRender: (value) => {
            return value || '--';
          }
        },
        {
          title: '备注',
          align: 'left',
          dataIndex: 'remark',
          customRender: (value) => {
            return value || '--';
          }
        },
        {
          title: '链接',
          align: 'left',
          dataIndex: 'uri',
          customRender: (value) => {
            return value || '--';
          }
        },

        {
          title: '操作',
          align: 'left',
          dataIndex: 'option',
          width: 148,
          customRender: (value, record, index) => {
            const { id } = record;
            return [
              <a-button type='link' onClick={() => this.testEventHandler(record, index)}>测试</a-button>,
              <a-button type='link' onClick={() => this.editEventHandler(record, index)}>修改</a-button>,
              <a-popconfirm
                title='确认删除此项?'
                ok-type='danger'
                ok-text='确认'
                cancel-text='取消'
                onConfirm={() => this.delItemHandler(id)}
              >
                <a-button type='link'>删除</a-button>
              </a-popconfirm>
              // <a-button type='primary' size='small' ghost>版本管理</a-button>
            ];
          }
        }

      ])

    };
  },
  computed: {
    ...mapState('alertConfig', [
      'servAlertList',
      'servAlertLoading',
      'paginationOptions',
      'saveServAlertLoading',
      'alertRepType',
      'alertType',
      'rpPaginationOptions',
      'repReportParamLabelLoading',
      'repReportParamLabelList'
    ]),
    ...mapState('fraMonitoring', [
      'repReportParamGroup'
    ]),
    ...mapGetters('setting', ['sideMenuWidth'])
  },
  watch: {
    'addForm.groupName'(nv, ov) {
      if (nv) {
        this.changeRpTable({ current: 1 });
        this.$nextTick(() => {
          this.$refs.addForm?.validateField('groupName');
        });
      } else {
        this.$refs.addForm.resetFields();
      }
    },
    addVisible(nv) {
      if (nv && !this.addForm.groupName) {
        this.changeRpTable({ current: 1 });
      }
      if (!nv) {
        this.labelForm.labelName = '';
        // 断开查询label的接口
        if (window.$httpRequestList.length > 0) {
          window.$httpRequestList.forEach(item => {
            item('interrupt');// 给个标志，中断请求
          });
          window.$httpRequestList = [];
        }
      }
    }
  },
  mounted() {
    this.changeTable({ current: 1 });
    this.getAlertRepType();
    this.getAlertType();
    // this.getRepReportParamLabelList();
    this.getRepReportParamGroup();
  },
  methods: {
    ...mapMutations('alertConfig', [
      'setState'
    ]),
    ...mapActions('fraMonitoring', [
      'getRepReportParamGroup'
    ]),
    ...mapActions('alertConfig', [
      'getServAlert',
      'saveServAlert',
      'updateServAlert',
      'updateDeleted',
      'getAlertRepType',
      'getAlertType',
      'getRepReportParamLabelList'
    ]),
    categoryChangeHandler() {
      const item = this.alertRepType.find(item => item.name === this.addForm?.category) ?? '';

      item ? this.sourceName = [item] : '';
    },
    changeEventHandler(e) {
      this.getRepReportParamLabelList({ groupName: this.addForm.groupName });
    },
    changeRpTable({ current, pageSize = 5 }) {
      if (pageSize !== this.rpPaginationOptions.pageSize) {
        current = 1;
      }
      this.setState({ key: 'rpPaginationOptions', payload: { ...this.rpPaginationOptions, pageNum: current, pageSize }});
      const params = {
        groupName: this.addForm.groupName,
        labelName: this.labelForm.labelName ? this.labelForm.labelName : undefined
      };

      this.getRepReportParamLabelList(params);
    },
    changeTable({ current, pageSize = 10 }) {
      if (pageSize !== this.paginationOptions.pageSize) {
        current = 1;
      }
      this.setState({ key: 'paginationOptions', payload: { ...this.paginationOptions, pageNum: current, pageSize }});
      this.getData();
    },

    addConfirmHandler() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          if (this.addForm.id) {
            this.updateServAlert(this.addForm).then((rep) => {
              if (rep) {
                this.addVisible = false;
                this.cancelHandler();
                this.getData();
              }
            });
          } else {
            this.saveServAlert(this.addForm).then((rep) => {
              if (rep) {
                this.addVisible = false;
                this.cancelHandler();
                this.changeTable({ current: 1 });
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    reBackData() {
      this.addForm = { ...this.servAlertList[this.rowIndex] };
    },
    editPrev() {
      this.rowIndex = Math.max(0, this.rowIndex - 1);
      this.addForm = { ...this.servAlertList[this.rowIndex] };
      this.rowSelection.selectedRowKeys[0] = this.addForm.labelName;
    },
    editNext() {
      this.rowIndex = Math.min(this.servAlertList.length - 1, this.rowIndex + 1);
      this.addForm = { ...this.servAlertList[this.rowIndex] };
      this.rowSelection.selectedRowKeys[0] = this.addForm.labelName;
    },
    cancelHandler() {
      this.addForm = {};
      this.addVisible = false;
      this.addTitle = '新增';

      this.$refs.addForm.resetFields();
    },
    // 编辑
    editEventHandler(row, index) {
      this.addVisible = true;
      this.addForm = { ...row };
      this.rowIndex = index;
      this.addTitle = '修改';
      this.$set(this.addForm, 'sourceName', row.sourceName);
      this.categoryChangeHandler();
      this.rowSelection.selectedRowKeys[0] = row.labelName;
    },
    // 测试
    testEventHandler(row,index){

    },
    // 确认删除
    delItemHandler(id) {
      this.updateDeleted({ id }).then((rep) => {
        if (rep) {
          this.getData();
        }
      });
    },
    // 重置
    resetSearchHandler() {
      this.search = {};
      this.changeTable({ current: 1 });
    },
    getData() {
      this.getServAlert(this.search);
    }
  }
};
</script>

<style>
.logic-textarea{
  height: 330px!important;
  min-height: 330px!important;
  max-height: 330px!important;
}

</style>
